<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" />
		<title>文章列表</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/animate.css" />
		<link rel="stylesheet" href="./css/article.css" />
	</head>

	<body>
		<!-- 模态框的开始 -->
		<div id="myModal01" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">文章标题</h4>
		      </div>
		      <div class="modal-body">
		        <p></p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 模态框的结束 -->
		<header></header>

		<section id="carousel" class="carousel slide" data-ride="carousel">
			<!-- 如果是需要 全屏的直接写 如果需要左右空开距离的 使用 栅格 -->
			<div class="container">
				<!-- 导航圆点 -->
				<ol class="carousel-indicators">
				    <li data-target="#carousel" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel" data-slide-to="1"></li>
				    <li data-target="#carousel" data-slide-to="2"></li>
				</ol>
				<!-- 图片主体 -->
				<div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="imgs/carousel/slide1.png">
				      <div class="carousel-caption">
				        <h1>Bootstrap的文章</h1>
				      </div>
				    </div>
				    <div class="item">
				      <img src="imgs/carousel/slide2.png">
				      <div class="carousel-caption">
				        <h1>HTML5的文章</h1>
				      </div>
				    </div>
				    <div class="item">
				      <img src="imgs/carousel/slide3.png">
				      <div class="carousel-caption">
				        <h1>CSS3的文章</h1>
				      </div>
				    </div>
					<!-- 上一页和下一页 按钮 -->
					<a class="left carousel-control" href="#carousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
					</a>
					<a class="right carousel-control" href="#carousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</a>
				</div>
			</div>
		</section>

		<section id="article">
			<div class="container" style="margin-top: 50px;">
				<div class="row">
					<div id="left" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
						<div class="list-group">
							<button type="button" class="list-group-item active">
								全部文章<span class="badge">0</span>
							</button>
							<button type="button" class="list-group-item">
								HTML/HTML5<span class="badge">0</span>
							</button>
							<button type="button" class="list-group-item">
								CSS/CSS3<span class="badge">0</span>
							</button>
							<button type="button" class="list-group-item">
								VUE<span class="badge">0</span>
							</button>
						</div>
					</div>
					<div id="right" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
						<div class="panel panel-default" style="background-color: rgba(255,255,255,0);">
							<div class="panel-heading">
								文章列表
							</div>
							<table class="table table-hover">
								<tbody>
									<tr>
										<td>文章名称</td>
										<td>文章时间</td>
									</tr>
									<tr>
										<td>文章名称</td>
										<td>文章时间</td>
									</tr>
									<tr>
										<td>文章名称</td>
										<td>文章时间</td>
									</tr>
									<tr>
										<td>文章名称</td>
										<td>文章时间</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</section>

		<footer></footer>

		<script src="./js/jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script src="./js/headerAndFooter.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//请求数据
				getData();
				$('#carousel').carousel({
					interval: 2000
				})
				$('#carousel').on('slide.bs.carousel', function (e) {
					let h1 = $(e.target).find(".carousel-inner .active h1").text();
					console.log(h1);
				})
			})
			//50个页面 每个页面都有各种各样的ajax请求
			//将重复的内容进行封装 以提高代码的使用效率（面向对象）
			async function getData() {
				let res = await fetch("./api/Account.php/GetAll")
					.then(req => req.json());
				//请求完数据 才执行文章标题统计的函数
				title(res);
				console.log(res);
			}
			//左侧的文章标题选择
			function title(res) {
				if (res.status) {
					//统计出个类别文章的数量 改写 徽章
					$("#left button").each(function(index, item) {
						//绑定一个类别的选择 用于区分文章
						$(item).attr("type", index);
						if (index == 0) {
							//统计出全部文章数量 然后 放到badge徽章里面
							let sum = res.data.reduce((n, item) => n += 1, 0);
							$(this).find("span").text(sum);
						} else {
							//数组中 对应type给过滤出来
							let sum = res.data.filter(item => item.type == index)
								.reduce((n, item) => n += 1, 0);
							$(this).find("span").text(sum);
						}
					})
					//当某个button点击的时候 修改active类名
					$("#left button").on("click", function() {
						$(this).siblings().removeClass("active");
						$(this).addClass("active");
						//点击的时候 要切换右侧的文字列表
						content(res.data, $(this).attr("type"));
					})
					//第一开始的时候 让第一个按钮点击一下
					$("#left button")[0].click();
				} else {
					alert("请求数据失败，请稍后重试")
				}

			}

			function content(res, type) {
				let newarr = [];
				if (type == 0) {
					newarr = res;
				} else {
					newarr = res.filter(item => item.type == type)
				}
				$("#right table tbody").empty();
				newarr.forEach(item => {
					$("#right table tbody").append(`
				<tr onclick="showAricle(this)" data="${item.show_id}"><td>${item.title}</td><td>${item.datetime}</td></tr>`);
				})
			}
			async function showAricle (tr) {
				//根据tr上面的data里面的show_id查询出单个文章
				let show_id = $(tr).attr("data");
				//console.log(show_id);
				let {data:res} = await fetch("./api/Account.php/GetOneArticle?show_id="+show_id)
				.then(req => req.json());
				console.log(res[0])
				//$('#myModal01').modal('show')
				$('#myModal01').find(".modal-title").html(res[0].title);
				$('#myModal01').find(".modal-body p").html("<pre>"+res[0].context+"</pre>");
				$('#myModal01').modal("show");
			}
		</script>
	</body>
</html>
